<template>
    <div class="menuBox">
        <el-menu
            @select="selectMenu"
            :default-active="currentIndexLight"
            class="el-menu-vertical-demo"
            text-color="#333"
            active-text-color="#4a7bff">
            <div v-for="msg in menuList" :key="msg.path">
                <el-submenu :index="msg.path">
                    <template slot="title">
                        {{msg.name}}
                    </template>
                    <template v-for="child in msg.child">
                        <el-menu-item :class="child.path==path?'blue':''" :key="child.path" :index="child.path" @click="menuClick(msg,child.name,child.path);">
                            {{child.name}}
                        </el-menu-item>
                    </template>
                </el-submenu>
            </div>
        </el-menu>
    </div>
</template>
<script>
import {mapActions,mapMutations} from 'vuex'
export default {
    data () {
        return {
            startRouter: true,//开启路由标识， ，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
            currentIndexLight: '',//当前激活菜单的 index  高亮显示
            menuList: [
                {
                    name: '数据中心',
                    path: '/',
                    child: [
                        {
                            name: '消息队列',
                            path: '/message',
                        },
                        {
                            name: '离线文件',
                            path: '/file',
                        },
                    ]
                },
            ],
            path:'/'
        }
    },
    created(){
      this.currentIndexLight = this.$route.path
    },
    methods: {
        selectMenu(key, keyPath) {
            this.currentIndexLight = key;
        },
        // 菜单点击事件
        menuClick (msg,title, path,) {
            this.path=path
            this.$router.push(path)
        }
    }
}
</script>
<style lang="stylus" scoped>
    .menuBox {
        width 184px
        background #fff
        overflow hidden
        position fixed
        top 49px
        bottom 0
        left 0
        // z-index 99
    }
    .menuTit {
        font-size 20px
        color #ffffff
        padding 16px 0
        border-bottom 1px solid #2b2d3a
        text-align center
    }
    >>> .el-menu {
        border-right 0px solid #000
    }
    >>> .el-submenu__title {
        font-size 18px
    }
    >>> .el-menu-item {
        font-size 14px
    }
    // >>> .blue{
    //     background:rgb(44, 112, 255)!important;
    // }
    >>> .el-submenu.is-active .el-submenu__title {
        font-size 16px
    }
    >>> .el-menu-item.is-active{
        background #d7e0f0
    }
</style>
